<template>
  <div class="index-mh">
    <img v-for="img in imgList" :key="img" v-lazy="img" >
    <img class="share_img_btn" src="../../../assets/img/modules/share/mh_btn_1.png" alt="" @click="shareShow = true">
    <div class="input_body">
      <input type="text" v-model="stuName" pattern="^$|^(\d+|\-){7,0}$" required placeholder="请输入意向学员姓名">
      <input type="tel" v-model="stuPhone" pattern="^1[3456789]\d{9}$" required placeholder="请输入意向学员手机号">
      <img class="set_img_btn" src="../../../assets/img/modules/share/mh_btn_2.png" alt="" @click="setStuData">
    </div>
    <!--分享弹窗-->
    <div v-if="shareShow" class="share_btn_img" @click="shareShow = false">
      <img src="../../../assets/img/modules/share/icon_11.png" alt="">
    </div>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
  </div>
</template>
<script>
import wxapi from '@/utils/wxapi.js'
import dragLoding from '@/components/loding'
import { isMobile } from '@/utils/validate'
export default {
  name: 'index-mh',
  components: {
    dragLoding
  },
  data () {
    return {
      imgList: [
        'http://m.oucgz.cn/images/mh_1.png',
        'http://m.oucgz.cn/images/mh_2.png',
        'http://m.oucgz.cn/images/mh_3.png',
        'http://m.oucgz.cn/images/mh_4.png',
        'http://m.oucgz.cn/images/mh_5.png',
        'http://m.oucgz.cn/images/mh_6.png'
      ],
      shareShow: false,
      showLoding: true,
      stuName: '',
      stuPhone: ''
    }
  },
  props: {},
  watch: {
    stuPhone: function (newValue, oldValue) {
      this.stuPhone = newValue.replace(/[^\d]/g, '').substring(0, 11)
    }
  },
  methods: {
    /* wf_Huang 2019/9/29 0029 提交意向学员信息 */
    setStuData () {
      if (!isMobile(this.stuPhone)) { this.$toast('请选择输入正确的手机号'); return false }
      if (!this.stuName) { this.$toast('请选择输入意向学员姓名'); return false }
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/v1.new_weiba/addMhPrepareOrder`,
        data: {
          phone: this.$store.state.share.phone,
          userName: this.stuName,
          userPhone: this.stuPhone
        },
        method: 'post',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast(res.message)
          return false
        }
        this.$toast('提交成功\n您已帮助「' + this.stuName + '」成功登记报读')
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/15 0015 16:46
     *@function  判断分享使用 app分享还是wx接口
     *****************************************/
    shareAPPorWx () {
      if (this.$store.state.device === 'WX') {
        this.shareShow = true
      } else if (this.$store.state.device === 'APP') {
        try {
          // eslint-disable-next-line no-undef
          Phone.inShare(this.shareUrl, '你有' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '待领取→', '93%加入了「国开」的会员都获得了学历提升，现注册还送' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '券与会员权益哦！', 'http://m.oucgz.cn/images/share_wx.png')
        } catch (e) {}
      }
    },
    /* wf_Huang 2019/8/27 0027 获取数据 */
    getData () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/web1.wx_user/getFollowByPhone?phone=${this.$store.state.share.phone}&gsign=${this.$store.state.gsign}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast(res.msg)
          return false
        }
        this.userData = res.data
        this.showLoding = false
      }).catch(() => {})
    },
    wxRegCallback () {
      // 用于微信JS-SDK回调
      this.wxShareTimeline()
      this.wxShareAppMessage()
    },
    wxShareTimeline () {
      // 微信自定义分享到朋友圈
      let option = {
        title: '你有' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '待领取→', // 分享标题, 请自行替换
        link: this.shareUrl, // 分享链接，根据自身项目决定是否需要split
        imgUrl: 'http://m.oucgz.cn/images/share_wx.png', // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          this.shareShow = false
        },
        error: () => {
          this.$toast('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareTimeline(option)
    },
    wxShareAppMessage () {
      // 微信自定义分享给朋友
      let option = {
        title: '你有' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '待领取→', // 分享标题, 请自行替换
        desc: '93%加入了「国开」的会员都获得了学历提升，现注册还送' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '券与会员权益哦！', // 分享描述, 请自行替换
        link: this.shareUrl, // 分享链接，根据自身项目决定是否需要split
        imgUrl: 'http://m.oucgz.cn/images/share_wx.png', // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          this.shareShow = false
        },
        error: () => {
          this.$toast('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareAppMessage(option)
    },
    /* wf_Huang 2019/8/28 0028 拼接分享地址 */
    setShareUrl () {
      this.shareUrl = `${window.SITE_CONFIG['Url']}share-register?device=${this.$store.state.device}&gsign=${this.$store.state.gsign}&uniacid=${this.$store.state.uniacid}&phone=${this.$store.state.share.phone}`
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    if (this.$route.query.device) {
      this.$store.state.device = this.$route.query.device
    }
    if (this.$route.query.gsign) {
      this.$store.state.gsign = this.$route.query.gsign
    }
    if (this.$route.query.uniacid) {
      this.$store.state.uniacid = this.$route.query.uniacid
    }
    if (this.$route.query.phone) {
      this.$store.state.share.phone = this.$route.query.phone
      window.location.href = window.location.href.split('?')[0]
    }
    localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    this.getData()
    this.setShareUrl()
    wxapi.wxRegister(this.wxRegCallback)
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .index-mh {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    height: 3472px;
    img {
      display: block;
      width: 750px;
      height: auto;
    }
    .share_img_btn{
      position: absolute;
      top: 450px;
      left: 50%;
      width: 594px;
      height: 134px;
      transform: translate(-50%,750px);
    }
    .input_body{
      position: absolute;
      top: 2100px;
      left: 50%;
      width: 594px;
      transform: translate(-50%,100%);
      input{
        border-radius: 4px;
        border: 2px solid #dddddd;
        display: block;
        width: 100%;
        padding: 10px 15px;
        font-size: 30px;
        line-height: 60px;
        margin-bottom: 40px;
        &:focus:valid{
          border-color: #77c25b;
        }
        &:focus:invalid{
          border-color: #ff1220;
        }
        &::placeholder{
          color: #999999;
        }
      }
      .set_img_btn{
        width: 594px;
        height: 134px;
      }
    }
  }
</style>
